// H币入账消息
<template>
  <div class="HcoinBox">
    <div v-for="item in item1" :key="item.id" class="HcoinBox1">
      <div class="HcoinTitle">{{ item.title }}</div>
      <p>{{ item.age }}</p>
      <button>{{ item.num }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { GetMessages } from "../../utils/api/Suprise";
// const item1 = ref([
//   {
//     id: 1,
//     title: "连续5天签到成功!您的5H币已经入账啦!",
//     age: "2019年3月10日   17:21",
//     num: "立即查看",
//   },
//   {
//     id: 2,
//     title: "您对患者王麻子的病友圈建议被采纳,恭喜您获得系统对您的10H币奖励以及悬赏的30H币!",
//     age: "2019年2月20日   10:17",
//     num: "立即查看",
//   },
//   {
//     id: 3,
//     title: "您完善了个人的信息获得了30H币!",
//     age: "2019年2月18日   14:20",
//     num: "立即查看",
//   },
//   {
//     id: 4,
//     title: "您今天成功发布了一条病友圈,20H币已经到账啦!再接再厉!",
//     age: "2019年2月12日   16:13",
//     num: "立即查看",
//   },
//   {
//     id: 5,
//     title: "感谢您使用维度健康进行健康评测,送您20H币祝您身体健康!",
//     age: "2019年2月10日   15:33",
//     num: "立即查看",
//   },
//   {
//     id: 6,
//     title: "感谢您使用维度健康进行健康评测,送您20H币祝您身体健康!",
//     age: "2019年2月10日   15:33",
//     num: "立即查看",
//   },
// ]);
const item1 = ref([]);
GetMessages().then((res) => {
  if (res.data.data) {
    // 遍历res.data.data来填充item1
    res.data.data.forEach((item) => {
      // 假设每个mate对象都有id, title, 和一个可以代表age的属性（这里假设为mate.age，但您可能需要根据实际数据结构调整）
      item1.value.push({
        id: item.id,
        title: item.title,
        age: item.tiem,
        num: item.context,
      });
    });
  }
});
</script>

<style lang="scss">
.HcoinBox {
  width: 100%;
  height: 90%;
  overflow: auto;
}
.HcoinBox1 {
  width: 90%;
  height: 120px;
  margin: 20px 10px auto;
}
.HcoinTitle {
  font-size: 16px;
}
.HcoinBox1 p {
  width: 160px;
  position: relative;
  left: 60px;
  top: 30px;
}
.HcoinBox1 button {
  position: relative;
  left: 260px;
  bottom: 10px;
}
</style>
